<template>
	<view class="index">
		<model-page>
		<view class="head" >
			<view class="head_left" >
				<image src="../../static/image/index/userAvatar.png" mode="" v-if="isPhone"></image>
				<text v-if="isPhone">{{userInfo?.nickName || ""}}</text>
				<view class="doormanTi" v-if="!isPhone">
					<view class="avatar">
						<image src="../../static/image/login_icon.png" mode=""></image>
					</view>
					<view class="doorName">
						{{userInfo?.nickName || ""}}
					</view>
				</view>
			</view>
			<view class="head_right"  @click="toExitLogin">
				<image src="../../static/image/close_exit.png" mode=""></image> 
				<text>退出登录</text>
			</view>
		</view>		
		 <!-- 告警列表-->
		<StaffIndex v-if="!roleList.includes('menwei')"/>
		<DoorMan v-else/>
		</model-page>

	</view>
		<uni-popup ref="popup">
		<view class="exitLogin">
		 <view class="title">
		 	确定要退出当前账号吗？
		 </view>
		 <view class="btn_group">
		 	<view @click="cancel">
		 		取消
		 	</view>
			<view @click="confirm">
				确定
			</view>
		 </view>
		</view>
		</uni-popup>
</template>

<script setup>
	import {onMounted, ref} from  'vue'
	import StaffIndex from '@/views/staff/index.vue'
	import DoorMan from '@/views/doorman/index.vue'
	import {getUserInfo} from "@/api/index.js"
	import {exitLogin} from '@/api/login.js'
	import {isDeviceType} from '@/hooks/deviceType.js'
	const isPhone = ref(isDeviceType('phone'))
	const popup = ref()
	onMounted(()=>{
		reqUserInfo()
	})
	// 获取用户信息
	const userInfo = ref()
	const roleList = ref([])
	const reqUserInfo =async()=>{
	const {userId,roles} = uni.getStorageSync("permission")
	roleList.value = roles
	const {code,data:res} = await getUserInfo({userId})
	if(code === 200){
		uni.setStorageSync("userInfo",res)
		userInfo.value = res
	}
	}
	// 退出登录
	const toExitLogin = ()=>{
		popup.value.open()
	}
	const cancel = ()=>{
		popup.value.close()
	}
	const confirm = async()=>{
   uni.clearStorageSync()
   const {code,data:res} = await exitLogin()
   if(code === 200){
	uni.redirectTo({
		url:"/pages/login/login"
	})   
   }

	}
</script>

<style lang="less" scoped>
.index{
	.head{
		display: flex;
		justify-content: space-between;
		margin: 120rpx 0 40rpx;
		.head_left{
			display: flex;
			align-items: center;
			>image{
				width: 36rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		.head_right{
			display: flex;
			align-items: center;
			height: 80rpx;
			background: rgba(255,255,255,0.5);
			border: 1rpx solid #FFFFFF;
			padding: 0 23rpx;
			border-radius: 80rpx;
			>image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 7rpx;
			}
			>text{
				display: flex;
				font-weight: 500;
				font-size: 28rpx;
				color: #2778FF;
			}

		}
}



}
.exitLogin{
	padding: 57rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	.title{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
	}
	 .btn_group{
		 margin-top: 78rpx;
		 display: flex;
		 width: 100%;
		 >view{
			 flex: 1;
			 height: 68rpx;
			 text-align: center;
			 border-radius: 40rpx;
			 line-height: 68rpx;
			 &:first-child{
				background: #F2F8FF;
				color: #666666;
				margin-right: 28rpx;
			 }
			&:last-child{
				background: linear-gradient( 180deg, #74B7FF 0%, #1680F3 100%);
				color: #FFFFFF;
			}
		 }
	 }
}
@media screen and (min-width: 768px){
	.index{
		.head{
			padding: 0 30rpx;
			.head_left{
				.doormanTi{
					position: relative;
					height: 150rpx;
					.avatar{
						position: absolute;
						left: 0;
						width: 150rpx;
						height: 150rpx;
						border-radius:120rpx ;
						background-color: #edf0ff;
						z-index: 2;
						display: flex;
						justify-content: center;
						align-items: center;
						>image{
							width: 80%;
							height: 80%;
						}
					}
					.doorName{
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 100rpx;
						width: 260rpx;
						height: 120rpx;
						border-radius:0  80rpx  80rpx 0;
						background-color: #edf0ff;
						text-align: center;
						line-height: 120rpx;
						font-size: 40rpx;
					}
				}
			}
			.head_right{
					height: 140rpx;
					padding: 0 46rpx;
					border-radius: 80rpx;
					>image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 14rpx;
					}
					>text{
						font-weight: 500;
						font-size: 48rpx;
					}
				
			}
		}
	}
	.exitLogin{
		padding: 80rpx 60rpx;
		border-radius: 20rpx;
		.title{
			font-size: 64rpx;
		}
		.btn_group{
			>view{
			height: 80rpx;
			font-size: 64rpx;	
			 line-height: 80rpx;
			 border-radius: 80rpx;
			}

		}
	}
}
</style>
